<template>
  <a-form-model
    class="main"
    style="width: 400px"
    ref="regForm"
    :model="form"
    :rules="rules"
    :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
    :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
    @submit="onSubmit"
  >
    <a-spin :delay="100" :spinning="loading">
      <a-form-model-item prop="name" label="商家名称">
        <a-input v-model="form.name" allowClear :maxLength="32" placeholder="请输入商家名称" />
      </a-form-model-item>
      <a-form-model-item prop="leader" label="负责人">
        <a-input v-model="form.leader" allowClear :maxLength="8" placeholder="请输入负责人姓名" />
      </a-form-model-item>
      <a-form-model-item prop="phone" label="手机号码">
        <a-input v-model="form.phone" allowClear :maxLength="11" placeholder="请输入登录手机号码" />
      </a-form-model-item>
      <a-form-model-item prop="passWord" label="登录密码">
        <a-input-password v-model="form.passWord" allowClear :maxLength="50" placeholder="请输入登录密码" />
      </a-form-model-item>
      <a-form-model-item prop="confirm" label="确认密码">
        <a-input-password v-model="form.confirm" allowClear :maxLength="50" placeholder="确认登录密码" />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 16, offset: 6 }">
        <a-button type="primary" htmlType="submit">立即注册</a-button>
        <a-button @click.stop="onReset" style="margin-left: 8px">重置</a-button>
        <router-link :to="{ name: 'Login' }" style="float: right">返回登录</router-link>
      </a-form-model-item>
    </a-spin>
  </a-form-model>
</template>
<script>
import regexp from '@/utils/validate'
import { RegisterForm } from '@/api/store'
export default {
  data() {
    return {
      form: {},
      loading: false,
      rules: {
        name: [{ required: true, whitespace: true, message: '请输入商家名称', trigger: 'blur' }],
        leader: [{ required: true, whitespace: true, message: '请输入负责人姓名', trigger: 'blur' }],
        phone: [
          { required: true, whitespace: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: regexp.phone, message: '手机号码错误', trigger: 'blur' }
        ],
        passWord: [
          { required: true, whitespace: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, message: '密码最少设置6位', trigger: 'blur' }
        ],
        confirm: [
          { required: true, whitespace: true, message: '请输入确认登录密码', trigger: 'blur' },
          { min: 6, message: '密码最少设置6位', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value && value !== this.form.passWord) {
                callback('两次密码不一致')
              } else callback()
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    onSubmit(e) {
      e.preventDefault()
      this.$refs.regForm.validate(valid => {
        if (!valid) return false
        const { $message, form } = this
        this.loading = true
        RegisterForm(form)
          .then(() => {
            $message.success('注册成功')
            this.onReset()
            setTimeout(() => {
              this.$router.replace({ name: 'login' })
            }, 1000)
          })
          .catch(err => {
            $message.error(err)
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    onReset() {
      this.form = {}
      this.$refs.regForm.resetFields()
    }
  }
}
</script>